let appContent = {
  template: `<div>
  <!--右边上半区域-->
  <!--2.在父组件：把数据绑定在子组件的标签上，作为自定义属性 -->
  <app-hobby :datalist="hobbies" :test="test" :delHobby="delHobby"></app-hobby>
    <!--右边下半区域-->
    <!--1.在父组件：找到子组件标签，绑定自定义事件 delMan -->
    <!--写在组件内的数据默认是不会被接收：数据看不到的-->
    <app-salary :empList="empList" @delMan="delSalary">
      <template v-slot:title>
        <i>员工列表</i>
      </template>
      <template v-slot:icon>
        <i>图片</i>
      </template>
    </app-salary>
</div>`,

  data() {
    return {
      //1.在父组件准备好数据
      hobbies: ["看书", "台球", "睡觉", "撸代码"],
      test: "数据传给子组件hobby",
      empList: [
        {
          id: 1,
          name: "马云",
          salary: 80001,
        },
        {
          id: 2,
          name: "马化腾",
          salary: 80002,
        },
        {
          id: 3,
          name: "罗永浩",
          salary: 80003,
        },
        {
          id: 4,
          name: "李彦宏",
          salary: 80004,
        },
      ],
    };
  },

  methods: {
    //功能：删除某个兴趣爱好(写在父组件；谁的数据谁管理)
    delHobby(index) {
      let issure = confirm("您确定要删除?");
      if (issure) {
        this.hobbies.splice(index, 1);
      }
    },

    delSalary(index) {
      console.log("父组件的方法被调用", index);
      let issure = confirm("您确定要删除?");
      if (issure) {
        this.empList.splice(index, 1);
      }
    },
  },

  components: {
    appHobby,
    appSalary,
  },
};
